import { SyncOutlined } from "@ant-design/icons";
import { PropsWithChildren, useState } from "react";
import styles from "../index.module.css";
import { LegalAdviceInput } from "./LegalAdviceInput";
import { useRequest } from "ahooks";
import { fetchRecommendQuestion } from "@/api/server/recommend_question";

interface ILegalAdviceIndexProps {
  className?: string;
  onSubmit?: (str?: string) => void;
}
export function LegalAdviceIndex(
  props: PropsWithChildren<ILegalAdviceIndexProps>
) {
  const { onSubmit } = props;
  const { data, refresh } = useRequest(() =>
    fetchRecommendQuestion({ question_type: "qa" })
  );

  const [inputValue, setInputValue] = useState("");

  return (
    <div className="px-[76px] pt-[54px] flex flex-col items-center h-full">
      <img src="/images/logo-mini.png" className="w-[36px]" />
      <div className={styles.title}>您好，我是白话用工侠AI咨询助手</div>
      <div className={styles.desc}>
      我拥有劳动法与用工管理领域的理解和推理能力，随时随地有问必答！
      </div>
      <div className={styles.recommends}>
        <div className="flex flex-row justify-between">
          <div className="text-[#666e79] text-[14px]">试试这样问</div>
          <div
            className="flex flex-row items-center gap-[8px] cursor-pointer"
            onClick={() => {
              refresh();
            }}
          >
            <SyncOutlined style={{ color: "#585a73" }} />
            <div className="text-[#585a73] text-[14px]">换示例</div>
          </div>
        </div>

        <div className="flex flex-row gap-[16px] mt-[8px] w-full">
          {data?.results?.slice(0, 4).map((item, i) => {
            return (
              <div
                className="recommendItemClass"
                key={i}
                onClick={() => {
                  setInputValue(item.question);
                }}
              >
                <div className="iconWarp">
                  <img src="/images/msg.svg" />
                </div>
                <div className="flexCon">
                  <div className="desc">{item.question}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="flex-1 min-h-0 w-full flex flex-row items-center">
        <LegalAdviceInput
          value={inputValue}
          onSubmit={onSubmit}
          onChange={(e) => setInputValue(e)}
        />
      </div>
    </div>
  );
}
